<template>
  <div id="demo" class="homepage">
    <div class="header" id="header" style="transform: perspective(500px) matrix3d(1, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, 0.00197768, 0, 1);"></div>
    <div class="surplus-wrapper" id="surplus-wrapper" style="transform: perspective(500px) matrix3d(1.00003, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, 0.00398412, 0, 1);">
      <div class="commission">
        <div class="commissionSurplus">佣金余额</div>
        <div class="countupBalance">￥1,388.00</div>
      </div>
    </div>
    <div class="icon-right-wrapper" id="icon-right-wrapper" style="transform: perspective(500px) matrix3d(1.00003, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, 0.00398412, 0, 1);">
      <div class="commission">
        <div class="commissionRight">right</div>
      </div>
    </div>
    <div class="whole-wrapper" id="whole-wrapper" style="transform: perspective(500px) matrix3d(1.00003, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, 0.00398412, 0, 1);">
      <div class="commission">
        <div class="wholeCommission">累计佣金 ￥4,444.00</div>
      </div>
    </div>
    <section id="wrapper">
      <div id="scroller" style="padding-top: 202px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition-duration: 600ms; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);">
        <ul class="infoList" id="infoList">
          <li class="uls">
            年轻有为
          </li>
          <li class="uls">
            2B青年
          </li>
          <li class="uls">
            人很好，nice
          </li>
          <li class="uls">
            大帅哥
          </li>



          <li class="uls">
            年轻有为
          </li>
          <li class="uls">
            2B青年
          </li>
          <li class="uls">
            人很好，nice
          </li>
          <li class="uls">
            大帅哥
          </li>
          <li class="uls">
            年轻有为
          </li>
          <li class="uls">
            2B青年
          </li>
          <li class="uls">
            人很好，nice
          </li>
          <li class="uls">
            大帅哥
          </li>
          <li class="uls">
            年轻有为
          </li>
          <li class="uls">
            2B青年
          </li>
          <li class="uls">
            人很好，nice
          </li>
          <li class="uls">
            大帅哥
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>

  import '../../assets/common/js/alloy_touch.css'
  import '../../assets/common/js/alloy_touch_transform'

  export default {
    name: 'demo',
    data() {
      return {
        loading: false
      }
    },
    mounted() {
      this.$store.commit('isHShow_Controller');

      var _this = this,
          user = document.getElementById("demo"),
          wrapper = document.getElementById("wrapper"),
          scroller = document.getElementById("scroller"),
          header = document.getElementById("header"),
          wholeWrapper = document.getElementById("whole-wrapper"),
          iconRight = document.getElementById("icon-right-wrapper"),
          surplusWrapper = document.getElementById("surplus-wrapper"),
          alloyTouch = null;

      wrapper.style.height = window.innerHeight+'px';
      scroller.style.minHeight = window.innerHeight+'px';
      Transform(scroller, true);
      Transform(header);
      header.originY = -70;
      header.translateY = -70;
      Transform(wholeWrapper);
      Transform(iconRight);
      Transform(surplusWrapper);

      alloyTouch = new AlloyTouch({
        touch: "#wrapper",
        vertical: true,
        target: scroller,
        property: "translateY",
        maxSpeed: 2,
        outFactor: 0.2,
        min: 160 * -20 + window.innerHeight - 202 - 50,
        max: 0,
        touchStart: function () {
          _this.reastMin(alloyTouch);
        },
        lockDirection: false,
        change: function (v) {
          if (v <= this.min + 5 && !_this.loading) {
            _this.loading = true;
            _this._loadMore(alloyTouch);
          }
          if (v < 0) {
            if (v < -140) v = -140;
            var scaleY = (240 + v) / 240;
            header.scaleY = scaleY;
            surplusWrapper.translateY = v / 1.82;
            iconRight.translateY = v / 3.5;
            wholeWrapper.translateY = v / 1.82;
            wholeWrapper.translateX = v / 1.3;
          } else {
            var scaleY = 1 + v / 240;
            header.scaleY = scaleY;
            surplusWrapper.translateY = v / 1.82;
            iconRight.translateY = v / 1.82;
            wholeWrapper.translateY = v / 1.82;
            wholeWrapper.translateX = 0;
          }
        }
      })

      user.addEventListener("touchmove", function (evt) {
        evt.preventDefault();
      }, false);
    },
    methods: {
      _loadMore(evt) {
        setTimeout(()=> {
          console.log('加载完。。。');
          this.loading = false;
          this.reastMin(evt);
        }, 500)
      },
      reastMin(evt) {
        evt.min = -1 * parseInt(getComputedStyle(scroller).height) + window.innerHeight - 50;
      }
    },
    beforeDestroy(){
      this.$store.commit('isHShow_Controller');
    }
  }
</script>

<style lang="scss" scoped>

  #scroller, #wrapper, .header, .whole-wrapper, .surplus-wrapper, .icon-right-wrapper {
    position: absolute;
    width: 100%;
  }

  #wrapper {
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }

  #scroller {
    padding-top: 202px;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .header {
    top: 0;
    left: 0;
    z-index: 90;
    background-color: #5E5E5E;
    height: 120px;
    /*-webkit-transform-origin: top;*/
  }

  .whole-wrapper, .surplus-wrapper, .icon-right-wrapper {
    top: 0;
    left: 0;
    font-size: 0;
    z-index: 100;
    text-align: center;
  }

  .commission{
    width: 100%;
    height: 120px;
    text-align: center;
    /*background-color: #4A4A4A;*/
  }

  .commissionSurplus{
    color: #C0C0C4;
    font-size: .12rem;
    padding-top: 20px;
  }

  .countupBalance{
    color: #FFF;
    font-size: .24rem;
    padding-top: 5px;
  }

  .commissionRight{
    color: #C0C0C4;
    font-size: .12rem;
    line-height: 120px;
    text-align: right;
    padding-right: 15px;
  }

  .wholeCommission{
    color: #C0C0C4;
    font-size: .12rem;
    padding-top: 90px;
  }

  .infoList {
    margin-top: 15px;
  }

  .infoList li {
    font-size: .16rem;
    padding: .1rem .12rem;
    margin: 10px 0 24px;
    border-bottom: 1px solid #DCDCDC;
  }
</style>
